<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>

<div id="playercontainer"></div>


<div class="fx-box" id="guanggao">

    <div class="aui-slide-wrap"
         style="margin: 10px;border-radius:0.5rem;box-shadow:0.1rem 0.1rem 0.4rem rgba(99, 99, 99, 0.3);">

        <!--顶部横幅未加载完成时的提示-->
        <img id="bpic" src="../image/yujiazai.png" onClick="UnloadedCompleted()">
        <!--顶部横幅未加载完成时的提示-->

    </div>


    <div class="aui-slide-wrap"
         style="margin: 10px;border-radius:0.5rem;box-shadow:0.1rem 0.1rem 0.4rem rgba(99, 99, 99, 0.3);">

        <!--顶部横幅未加载完成时的提示-->
        <img id="bpic" src="../image/yujiazai.png" onClick="UnloadedCompleted()">
        <!--顶部横幅未加载完成时的提示-->
    </div>


</div>

<section class="aui-grid aui-margin-b-15">
    <div class="aui-row" id="fl_list">

        <!--VIP 观影区未加载完成时的提示-->


        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">爱奇艺</div>
        </div>

        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">腾讯视频</div>
        </div>

        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">优酷视频</div>
        </div>

        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">搜狐视频</div>
        </div>

        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">芒果TV</div>
        </div>

        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">PPTV</div>
        </div>

        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">暴风影音</div>
        </div>

        <div class="aui-col-xs-3 pt-list" tapmode onClick="UnloadedCompleted()">
            <i class="aui-iconfont"><img src="../image/app/ico_loading.gif"/></i>
            <div class="aui-grid-label">M1905</div>
        </div>


        <!--VIP 观影区未加载完成时的提示-->


    </div>

</section>


<!-- 视频列表 -->
<!--
<div  style="background-color:#c4c2c3;color:#000;font-size:16px;height:30px">&nbsp;&nbsp;推荐影片</div>

<div class="v-list-wrap" id="liveList">
  <ul class="clearfix" id="div_list">

  </ul>
</div>
-->
<!-- 视频列表 end-->

</body>
<!--推荐影片-->
<!--
<script type="text/x-dot-template" id="template">
{{~ it.msg : value : index }}
    <li onclick="openWin('{{= value. url }}')">
      <div class="video-mask-box">
        <img src="{{= value. img }}" alt="" class="game-pic">
      </div>
      <div class="til">{{= value. title }}</div>

    </li>
{{~}}
</script>
-->

<script type="text/x-dot-template" id="flicotpl">
    {{~ it.data : value : index }}
    <div class="aui-col-xs-3 pt-list" tapmode onclick="toBanner('{{= value. linkurl }}')">
        <i class="aui-iconfont"><img src="http://www.airan.info//{{= value. picurl }}"/></i>
        <div class="aui-grid-label">{{= value. name }}</div>
    </div>

    {{~}}
</script>
<script type="text/x-dot-template" id="guanggaotpl">
    {{~ it.data : value : index }}


    <div class="aui-slide-wrap"
         style="margin: 10px;border-radius:0.5rem;box-shadow:0.1rem 0.1rem 0.4rem rgba(99, 99, 99, 0.3);">

        <img src="http://www.airan.info//{{= value. picurl }}" tapmode onclick="toBanner('{{= value. linkurl }}')">

    </div>

    {{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/cyberplayer.js"></script>
<script src="../script/video.min.js"></script>
<script src="../script/videojs-contrib-hls.min.js"></script>
<script src="../script/videojs-contrib-quality-levels.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>

<script type="text/javascript">
    var api_url = localStorage.getItem('api_url');
    apiready = function () {

        var player = cyberplayer("playercontainer").setup({
            width: api.winWidth,
            height: 200,
            file: api.pageParam.video, // <—rtmp or flv直播地址
            fallbackfile: api.pageParam.video, // <— 备用播放地址，为了手机上能进行直播，设置hls直播流
            controlbar: {
                barLogo: false,
                autostart: true
            },
            stretching: "uniform",
            volume: 100,
            controls: true,
            ak: "dfd6c7951d4c477bb2555496c8e97166" // 公有云平台注册即可获得accessKey
        });

        player.play();

        player.on('fullscreen', function (ret) {
            //alert( JSON.stringify( ret ) );
            if (ret.fullscreen) {
                api.setScreenOrientation({
                    orientation: 'landscape_right'
                });
            } else {
                api.setScreenOrientation({
                    orientation: 'portrait_up'
                });
            }
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            api.setScreenOrientation({
                orientation: 'portrait_up'
            });
            api.closeWin();
        });


        //获取信息
        api.parseTapmode();

        getNav();

        api.setKeepScreenOn({
            keepOn: true
        });


    }


    function openWin(name) {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name: 'vplay1_win',
            url: 'vplay1_win.html',
            bounces: false,
            delay: delay,
            slidBackEnabled: true,
            vScrollBarEnabled: false,
            pageParam: {video: name}
        });
    }


    //////////////////////    广告图片获取  方法  getNav  S  //////////////////////
    function getNav() {
        var flid = $api.byId('fl_list');
        var fltpl = $api.byId('flicotpl');
        var guanggaoid = $api.byId('guanggao');
        var guanggaotpl = $api.byId('guanggaotpl');
        api.ajax({
            url: api_url + '/app/nav/fl?uid=' + localStorage.getItem('user_id'),
            method: 'get',
        }, function (ret, err) {
            if (ret) {
                //渲染模板
                var pagefn = doT.template(fltpl.text);
                flid.innerHTML = pagefn(ret.tu);

                var pagefn = doT.template(guanggaotpl.text);
                guanggaoid.innerHTML = pagefn(ret.guanggao);
                //        alert( JSON.stringify( ret.banner ) );


            } else {
                /*
                  alert( '网络错误' );
                  api.hideProgress();
                  */
            }
        });
    }

    //////////////////////    轮播图获取  方法  getNav  E  //////////////////////


    ///////访问轮播地址 方法    toBanner   S   ///////
    function toBanner(url) {

        if (url == '') {


            api.toast({
                msg: '(#^.^#) 暂无详情'
            });

        } else {


            //网络连接判断S


            api.ajax({
                url: api_url + '/login/login/banben.html',
                method: 'get'
            }, function (ret, err) {
                if (ret) {

                    //网络正常   跳转


                    /*
                    api.showProgress({
                        title: 'VIP登录中',
                        modal: false
                    });
              */
                    api.toast({
                        msg: '加载中'
                    });


                    api.openWin({
                        name: 'h5',
                        url: './h5.html',
                        pageParam: {
                            url: url
                        }
                    });


                } else {

                    //网络连接失败 进行提示
                    NetworkConnectionFailurePrompt();

                }


            });
            //网络连接判断E

        }
    }

    ///////访问轮播地址 方法    toBanner   E   ///////


    ///////广告图片 和小图标广告 点击访问 方法    imgUrl   S   ///////
    /*  function imgUrl(img){
        if (img=='img1') {
          api.openWin({
              name: 'h5',
              url: './h5.html',
              pageParam: {
                  url: localStorage.getItem('fxurl1')
              }
          });
        }else {
          api.openWin({
              name: 'h5',
              url: './h5.html',
              pageParam: {
                  url: img
              }
          });
        }

      }*/

    //// ↑ ↑ ↑ ↑ ↑原方法  ↑ ↑ ↑ ↑ ↑////
    function imgUrl(url) {


        if (url == '') {


            api.toast({
                msg: '(#^.^#) 暂无详情'
            });

        } else {


            //网络连接判断S


            api.ajax({
                url: api_url + '/login/login/banben.html',
                method: 'get'
            }, function (ret, err) {
                if (ret) {

                    //网络正常   跳转


                    /*
                    api.showProgress({
                        title: 'VIP登录中',
                        modal: false
                    });
              */
                    api.toast({
                        msg: '加载中'
                    });


                    api.openWin({
                        name: 'h5',
                        url: './h5.html',
                        pageParam: {
                            url: url
                        }
                    });


                } else {

                    //网络连接失败 进行提示
                    NetworkConnectionFailurePrompt();

                }


            });
            //网络连接判断E

        }


    }

    ///////广告图片 和小图标广告 点击访问 方法    imgUrl   E   ///////

</script>

</html>
